<template>
<div class="frame" style="padding:0px">
<div class="grid-content bg-purple-dark"> 
    <div class="text-content">
            <h1 class="blue-text" style="height: 30px;">行业领先的人工智能及大数据科技企业</h1>
            <h2 class="black-text" style="width:550px ;height:150px">专注智能文字识别及商业数据分析</h2>
          </div>
  </div>
  <div class="about">
    <div class="padding1">
    </div>
    <div class="text-section">
      <h1>关于我们</h1>
      <p>贵州大学计算机科学与技术学院文本计算与认知智能实验室现共汇聚高层次研究人员近30名(其中正高职称10人，副高职称15人，博士生导师6人，硕士生导师25人)。目前，培养在读研究生150余名。</p>
      <p>文本计算实验室的终端服务，即数据要素平台，提供了较高的技术附加值。目前已在银行、保险、证券、基金、汽车金融、供应链金融、政务、制造、物流、地产、征信等近30个行业实现成熟应用。</p>
    </div>
    <div class="image-section">
      <img src="@/assets/images/aboutUs_img/团队.png" alt="项目图片" />
    </div>
  </div>

  <div class="container">
    <div class="padding1">
      
    </div>
    <div class="list-section">
      <h1>奖励认证</h1>
    
      <ul>
        <!-- 遍历 list 中的数据，每一项都绑定一个鼠标悬停事件 -->
        <li 
          v-for="(item, index) in paginatedList" 
          :key="index"
          @mouseover="changeImage(item.awardImage)"
        >
          {{ item.awardName }}
        </li>
      </ul>
      
      <div class="pagination"  v-if="showAll">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>页面 {{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      
    </div><button  @click="toggleShowAll">
        {{display_button_content}}
      </button>
    </div>
    <div class="image-conatiner"><div class="image-section2">
      <!-- 显示当前图片 -->
      <img :src="currentImage" alt="展示图片" />
    </div></div>
    
  </div>
  <div class="container1">
    <div class="padding1">
    </div>
    <div class="list-section">
      <h1>所获专利</h1>
      <p>截至{{date}}，已获项目{{dataPatents.length}}项。</p>
      <ul>
        <!-- 遍历 list 中的数据，每一项都绑定一个鼠标悬停事件 -->
        <li 
          v-for="(item, index) in paginatedList1" 
          :key="index"
          @mouseover="changeImage1(item.applicationImage)"
        >
          {{ item.inventionTitle }}
        </li>
      </ul> 
      
      <div class="pagination"  v-if="showAll1">
      <button @click="prevPage1" :disabled="currentPage1 === 1">上一页</button>
      <span>页面 {{ currentPage1 }} / {{ totalPages1 }}</span>
      <button @click="nextPage1" :disabled="currentPage1 === totalPages1">下一页</button>
      
    </div><button  @click="toggleShowAll1">
        {{display_button_content1}}
      </button>
    </div>
    <div class="image-conatiner"><div class="image-section2">
      <!-- 显示当前图片 -->
        <img :src="currentImage1" alt="展示图片" />
      </div></div>
      
    </div>
   <div class="projects-container" style="padding-left:10%;height: 1000px;" >
    <h1>
      获批项目
    </h1>
    <!-- 年份选择按钮 -->
    <div class="year-buttons" style="padding-top: 30px;">
      <el-button @click="selectedYear = 2024"  :plain="selectedYear === 2024" round>2024</el-button>
      <el-button @click="selectedYear = 2023"   :plain="selectedYear === 2023" round>2023</el-button>
      <el-button @click="selectedYear = 2022"   :plain="selectedYear === 2022" round>2022</el-button>
      <el-button @click="toggleMore"  round>更多</el-button>
    </div>

    <!-- 更多年份的展示 -->
    <el-dialog :visible.sync="moreVisible" title="选择年份" width="30%">
      <el-button @click="selectYear(2021)" type="text">2021</el-button>
      <el-button @click="selectYear(2020)" type="text">2020</el-button>
      <el-button @click="selectYear(2019)" type="text">2019</el-button>
      <el-button @click="selectYear(2018)" type="text">2018</el-button>
    </el-dialog>

    <!-- 项目展示区 -->
    <el-scrollbar class="projects-scrollbar" style="height: 600px;width:1000px; padding-top: 30px;">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="project in filteredProjects"
          :key="project.id"
          :timestamp="project.period"
          :color="white">
          <div>
            <h1>{{ project.projectType }} </h1>
            <p>{{ project.projectNumber }}</p>
            <p>{{ project.name }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </div>
  <div class="last-container">
    <!-- 展示文字 -->
    <div class="last-text">立即探索，解锁更多产品详情</div>

    <!-- 按钮，点击后弹出表单对话框 -->
    <el-button type="primary" @click="openForm">申请试用</el-button>

    <!-- 表单对话框 -->
    <el-dialog title="申请试用" :visible.sync="dialogVisible" width="600px" @close="resetForm">
      <el-form ref="form" :model="form" label-width="80px" class="form-container">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="职业">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="法律相关领域" value="law"></el-option>
            <el-option label="教育相关领域" value="education"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
         
        </el-form-item>
        <el-form-item label="使用性质">
          <el-radio-group v-model="form.resource">
            <el-radio label="商用"></el-radio>
            <el-radio label="个人使用"></el-radio>
                        <el-radio label="政府单位使用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="申请说明">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>

        <!-- 按钮组 -->
        <el-form-item class="button-group">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</div>
  
</template>

<script>
import { getInfo } from "@/api/aboutUs";
function groupProjectsByYear(dataProjects) {
  const projectsByYear = {};

  dataProjects.forEach(project => {
    const year = new Date(project.startTime).getFullYear(); // 提取年份

    // 如果当前年份还没有对应数组，则初始化为空数组
    if (!projectsByYear[year]) {
      projectsByYear[year] = [];
    }

    // 格式化项目数据并添加到对应年份的数组中
    projectsByYear[year].push({
      id: project.projectId,
      name: project.projectName,
      projectNumber: project.projectNumber,
      projectType: project.projectType,
      period: `${new Date(project.startTime).getFullYear()}年${new Date(project.startTime).getMonth() + 1}月至${new Date(project.endTime).getFullYear()}年${new Date(project.endTime).getMonth() + 1}月`
    });
  });

  return projectsByYear;
}

export default {
    name: "aboutUs",
    data() {
        return {
           dataAwards: [  ],
      dataPatents: [],
      currentImage: require('@/assets/images/aboutUs_img/证书.jpeg'),
      currentImage1: require('@/assets/images/aboutUs_img/图片2.png'),
      showAll: false,
      // 当前页面
      currentPage: 1,
      // 每页显示的项目数
      pageSize: 4,
      display_button_content: "显示更多内容",
      currentPage1: 1,
      pageSize1: 4,
      showAll1: false,
      display_button_content1: "显示更多内容",
      date:new Date(),
      years: [2021, 2022, 2023, 2024], // 可根据需求增加年份
     currentYear: 2021, // 默认显示的年份    
      // 每年的项目数据
      projectsByYear: {
        2024: [
          { id: 1, name: "贵州省科学技术基金重点资助项目", projectNumber: "黔科合重大专项字[2024]003", direction: "面向公共大数据的可信大模型关键技术研究与应用", period: "2024年1月至2026年12月" },
          { id: 2, name: "国家重点研发计划", projectNumber: "2023YFC3304500", direction: "数据融合驱动的社会治理风险动态感知预警技术与应用示范", period: "2023年11月至2026年10月" },
          { id: 3, name: "国家重点研发计划", projectNumber: "2023YFC3304500", direction: "数据融合驱动的社会治理风险动态感知预警技术与应用示范", period: "2023年11月至2026年10月" },
          { id: 3, name: "国家重点研发计划", projectNumber: "2023YFC3304500", direction: "数据融合驱动的社会治理风险动态感知预警技术与应用示范", period: "2023年11月至2026年10月" }
        ],
        2022: [
          { id: 1, name: "贵州省科学技术基金重点资助项目", projectNumber: "黔科合重大专项字[2024]003", direction: "面向公共大数据的可信大模型关键技术研究与应用", period: "2024年1月至2026年12月" },
        ],
        2023: [
          { id: 1, name: "项目 E", projectNumber: "P2023-001", direction: "Machine Learning", period: "2023-01 ~ 2023-08" },
          { id: 2, name: "项目 F", projectNumber: "P2023-002", direction: "IoT", period: "2023-04 ~ 2023-12" },
        ],
        2021: [
          { id: 1, name: "项目 G", projectNumber: "P2024-001", direction: "Cybersecurity", period: "2024-03 ~ 2024-10" },
          { id: 2, name: "项目 H", projectNumber: "P2024-002", direction: "Edge Computing", period: "2024-06 ~ 2024-12" },
        ],
      },    
      selectedYear: 2024, // 默认选中2024年
      moreVisible: false, // 控制更多年份弹框的显示与隐藏
      dialogVisible: false, // 控制对话框显示
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
        };

  },
    mounted() {
    this.fetchModelData(); // 在组件加载时调用
  },
  computed: {
    async fetchModelData() {
      console.log("调用 getModelResult 方法...");
      try {
        const data = await getInfo(); // 调用获取数据的方法
        console.log("获取到的模型数据:", data["data"]["dataAwards"]); // 输出获取到的数据
        this.dataAwards = data["data"]["dataAwards"]; // 将数据赋值
        this.dataPatents = data["data"]["dataPatents"]; 
        this.date = `${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`;
        this.projectsByYear = groupProjectsByYear(data["data"]["dataProjects"]);
        console.log("获取到的模型数据:", this.projectsByYear ); // 输出获取到的数据
      } catch (error) {
        console.error("获取模型数据时出错:", error);
      }
    },
    // 计算当前页面要展示的项目
    paginatedList() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.displayedList.slice(startIndex, endIndex);
    },
    // 计算显示的项目列表
    displayedList() {
      return this.showAll ? this.dataAwards : this.dataAwards.slice(0, 4);
    },
    // 总页数
    totalPages() {
      return Math.ceil(this.displayedList.length / this.pageSize);
      },
    paginatedList1() {
      const startIndex = (this.currentPage1 - 1) * this.pageSize1;
      const endIndex = startIndex + this.pageSize1;
      return this.displayedList1.slice(startIndex, endIndex);
    },
    // 计算显示的项目列表
    displayedList1() {
      return this.showAll1 ? this.dataPatents : this.dataPatents.slice(0, 4);
    },
    // 总页数
    totalPages1() {
      return Math.ceil(this.displayedList1.length / this.pageSize1);
      },
    // 获取选定年份的项目
    filteredProjects() {
      return this.projectsByYear[this.selectedYear] || [];
    },
  },
    methods: {
      changeImage(newImage) {
        this.currentImage = newImage;
    },
    toggleShowAll() {
      this.showAll = !this.showAll;
      this.currentPage = 1; // 切换后重置到第一页
      if (this.showAll == true) {
        this.pageSize = 6
                this.display_button_content="隐藏更多内容"
      }
      else {
        this.pageSize = 4
        this.display_button_content="显示更多内容"
      }
    },
    // 切换图片
    changeImage(newImage) {
      this.currentImage = newImage;
    },
    // 分页控制
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
      },

      changeImage1(newImage) {
        this.currentImage1 = newImage;
      },
    toggleShowAll1() {
      this.showAll1 = !this.showAll1;
      this.currentPage1 = 1; // 切换后重置到第一页
      if (this.showAll1 == true) {
        this.pageSize1 = 6
                this.display_button_content1="隐藏更多内容"
      }
      else {
        this.pageSize1 = 4
        this.display_button_content1="显示更多内容"
      }
    },
    // 切换图片
    changeImage1(newImage) {
      this.currentImage1 = newImage;
    },
    // 分页控制
    nextPage1() {
      if (this.currentPage1 < this.totalPages1) {
        this.currentPage1++;
      }
    },
    prevPage1() {
      if (this.currentPage1 > 1) {
        this.currentPage1--;
      }
      },
      toggleMore() {
      this.moreVisible = !this.moreVisible;
    },
    // 选择更多年份的某个年份
    selectYear(year) {
      this.selectedYear = year;
      this.moreVisible = false;
    },
    openForm() {
      this.dialogVisible = true; // 打开对话框
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('申请已提交！');
          this.dialogVisible = false;
          this.resetForm();
        } else {
          this.$message.error('请完整填写表单！');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields(); // 重置表单内容
      }
    
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.bg-purple-dark {
  background: url('../../assets/images/aboutUs_img/banner@2x.png') no-repeat center center; /* 设置背景图片 */
  background-size: cover; /* 使背景图覆盖整个区域 */
  height: 520px; /* 设置行的高度，根据需要进行调整 */
}
  .el-row {
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 0px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .row-bg {
    background-color: #f9fafc;
  }
.grid-content {
  border-radius: 4px;
  min-height: 100px; /* 增加最小高度，确保容器足够大 */
}

.text-content {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: flex-start; /* 左对齐 */
}

.blue-text {
  color: rgb(47, 107, 236); /* 蓝色文字 */
  font-size: 32px; /* 设置字号 */
  font-weight: bold;
  padding-bottom: 30px; /* 可以调整为你需要的间距 */
}

.black-text { 
  color: black; /* 黑色文字 */
  font-size: 60px; /* 设置字号，比上面的文字小 */
  font-weight: bold;
  margin: 0; /* 去除上下间距 */
  line-height: 80px; /* 增加行距，确保文字不重叠 */
  padding-bottom: 10px; /* 增加下边距，防止文字之间的重叠 */
  width: 550px; /* 固定宽度 */
}

.text-content {
    position: relative;
  padding-left: 200px; /* 向右移动文字 */
  padding-top: 160px; /* 向下移动文字 */
}


.about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  min-height: 450px;
}

.text-section {
  flex: 1;
  margin-right: 20px;
}

.text-section h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  padding-left: 20px; /* 向右移动文字 */
}

.text-section p {
  font-size: 20px;
  color: #666;
  line-height: 1.6;
  padding-left: 0px; /* 向右移动文字 */
}


.image-section {
  flex: 1; /* 右侧图片占一半 */
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 400px; /* 固定高度 */
}

.image-section img {
  width: 60%; /* 图片在容器中占60%的宽度 */
  height: auto; /* 按比例缩放图片 */
  object-fit: cover; /* 确保图片填充 */
  border-radius: 8px;
}
.text-section {
  flex: 1;
  margin-right: 20px;
}

.container {
  display: flex;
  align-items: flex-start;
  min-height: 450px;
  justify-content: space-between;
  background-color: #F2F6FC;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  align-items: stretch; /* 保证子元素高度一致 */
}

.container1 {
  display: flex;
  align-items: flex-start;
  min-height: 450px;
  justify-content: space-between;
  background-color: #E2EAF2;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  align-items: stretch; /* 保证子元素高度一致 */
}

.list-section {
  flex: 1;
  margin-right: 20px;
  margin-top: 40px;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 水平方向居中 */
  justify-content: center; /* 垂直方向居中 */
}

.list-section h1 {
  list-style: none;
  padding: 0;
  font-size: 36px;
  padding-left: 30px; /* 向右移动文字 */
  font-weight: bold;
}
.list-section p {
font-size: 20px;
  color: #666;
  line-height: 1.6;
  padding-left: 0px; /* 向右移动文字 */
}

.list-section ul {
  list-style: none;
  padding: 0;
}

.list-section li {
  padding: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center; /* 水平居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.list-section li:hover {
  background-color: #f0f0f0;
}

.image-conatiner{
  flex: 1;
  display: flex;
  align-items: center; /* 垂直居中图片 */
  justify-content: center; /* 水平居中图片 */
}

.image-section2 {
  flex: 1;
  display: grid;
  place-items: center; /* 完全居中 */
  width: auto;
  height: auto;
}

.image-section2 img {
  width: 60%; /* 图片在容器中占60%的宽度 */
  height: auto; /* 按比例缩放图片 */
  object-fit: cover; /* 确保图片填充 */
  border-radius: 8px;
}




.padding1{ // 奖励认证填充
  width: 10%;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

button {
  padding: 8px 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #c0c0c0;
  cursor: not-allowed;
}

.projects-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
    color: white; /* 设置字体颜色为白色 */
  background: url('../../assets/images/aboutUs_img/background.png') no-repeat center center; /* 设置背景图片 */
  background-size: cover; /* 使背景图覆盖整个区域 */
  object-fit: cover
}

.projects-container h1{
  font-size: 36px;
}

.year-buttons {
  display: flex;
  gap: 80px; /* 设置按钮之间的间距 */
  margin-bottom: 20px;
  .el-button {
    transform: scale(2);
  }
}

.year-buttons .el-button {
  padding: 8px 16px;
  font-size: 16px;
}


.el-button {
  margin: 5px;
}

.projects-scrollbar {
  width: 80%;
  max-width: 1000px;
  height: 600px;
  padding: 10px;
  border: 1px solid transparent; /* 边框设为透明 */
  border-radius: 8px;
}

.projects-scrollbar .el-scrollbar__wrap {
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

.projects-scrollbar .el-scrollbar__wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari 隐藏滚动条 */
}
.el-timeline-item .el-timeline-item__content,
.el-timeline-item .el-timeline-item__timestamp {
  color: white; /* 设置字体颜色为白色 */
}

.el-timeline {
  font-size: 18px; /* 增大字体大小 */
}

.el-timeline-item {
  padding: 20px 10px; /* 增大条目的上下内边距 */
}

.el-timeline-item .el-timeline-item__timestamp {
  font-size: 20px; /* 增大时间戳的字体 */
  // padding: 10px 20px; /* 增大时间戳的内边距 */
}

.el-timeline-item .el-timeline-item__content {
  font-size: 18px; /* 增大项目内容的字体 */
}
/* 将项目文字向上移动 */
.el-timeline-item .el-timeline-item__content {
  margin-top: -10px; /* 向上移动项目文字 */
  padding-top: 0; /* 如果有额外的内边距可以去除 */
}

.el-dialog {
  text-align: center;
}

.el-dialog .el-button {
  width: 100%;
  margin-bottom: 10px;
}

.last-container {
  background: url('../../assets/images/aboutUs_img/guide_bg.png') no-repeat center center; /* 设置背景图片 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f8fb;
  padding: 40px;
  height: 200px;
  border: 1px solid #e0e0e0;
}

.last-text {
  font-size: 20px;
  color: white;
  margin-right: 20px;
}

.form-container {
  text-align: left; /* 表单内容靠左对齐 */
}

.button-group {
  display: flex;
  justify-content: center; /* 按钮居中显示 */
}

.button-group .el-button {
  margin: 0 10px; /* 按钮间距 */
  width: 80px; /* 按钮宽度一致 */
}
</style>
  